/* eslint-disable prefer-const */
<template>
  <page-header-wrapper>
    <!-- 提示 -->
    <a-result title="该功能暂未开放" @click="notopened" style="padding-top: 120px">
      <template #extra>
      </template>
    </a-result>
    <div style="display:none">
      <!-- 鼠标禁用 -->
      <!-- <div style="z-index: 999;display:flex;height:80%;width:100%;position:absolute;background-color:transparent;opacity:1;cursor:not-allowed;"></div> -->
      <!-- 提示 -->
      <a-row :gutter="24">
        <a-col span="24">
          <!-- <a-button type="primary" style="margin-bottom:15px;margin-right:15px" @click="handleAdd()">新增</a-button> -->
          <!-- <a-button type="danger" @click="handleDelete()" style="margin-bottom:15px;margin-right:10px;margin-left:15px" :disabled="!hasSelected" :loading="confirmLoading">删除</a-button> -->
          <a-input-search placeholder="输入您要搜索的内容" @search="onSearch" enter-button style="width:15%;margin-bottom:15px" v-model="search" />
          <keep-alive>
            <a-table
              :columns="columns"
              :data-source="dataSource"
              :rowClassName="rowClassName"
              @change="handleTableChange"
              :pagination="pagination"
              :scroll="{ x: 1200 }"
              :loading="tableLoading"
            >
              <span slot="method" slot-scope="method">
                <a-tag color="blue" v-if="method=='GET'">
                  {{ method }}
                </a-tag>
                <a-tag color="green" v-if="method=='POST'">
                  {{ method }}
                </a-tag>
              </span>
            </a-table>
          </keep-alive>
        </a-col>
      </a-row>
    </div>
  </page-header-wrapper>
</template>

<script>
import { getStreamTable } from '@/api/reviewexpert'
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
  data () {
    return {
      tableLoading: false,
      search: '',
      pagination: {
        current: 1,
        pageSize: 12,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['12', '20', '30', '50']
      },
      columns: [
        // {
        //   title: '序号',
        //   dataIndex: 'index',
        //   key: 'index',
        //   width: '5%'
        // },
        {
          title: '工程名称',
          dataIndex: 'project_name',
          key: 'project_name'
        },
        {
          title: '专家名称',
          dataIndex: 'username',
          key: 'username'
        },
        {
          title: '身份证号',
          dataIndex: 'card_num',
          key: 'card_num'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          key: 'phone'
        },
        {
          title: '专家级别',
          dataIndex: 'experts_level',
          key: 'experts_level'
        },
        {
          title: '专家职称',
          dataIndex: 'experts_title',
          key: 'experts_title'
        },
        {
          title: '专家所属单位',
          dataIndex: 'company_name',
          key: 'company_name'
        },
        {
          title: '流号日期',
          dataIndex: 'create_time',
          key: 'create_time',
          width: '15%'
        }
      ],
      dataSource: []
    }
  },
  methods: {
    getTableData (query) {
      // console.log(query)
      this.tableLoading = true
      var fd = new FormData()
      fd.append('per_page', this.pagination.pageSize)
      fd.append('current_page', this.pagination.current)
      if (query) {
        fd.append('query', query)
      }
      // console.log(fd)
      getStreamTable(fd).then(res => {
        this.dataSource = res.result.data
        Object.assign(this.pagination, { 'pageSize': Number(res.result.per_page), 'total': res.result.total, 'current': res.result.current_page })
        // console.log(this.pagination)
        this.tableLoading = false
      })
    },
    rowClassName () {
      return 'rowClass'
    },
    // 分页
    handleTableChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getTableData(this.search)
    },
    onSearch (value) {
      console.log(value)
      this.getTableData(value)
    }
  },
  watch: {
    search: function (newVal, oldVal) {
      delay(() => {
        this.getTableData(newVal)
      }, 1000)
    }
  },
  created () {
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
/deep/ .rowClass{
  background-color: #fff;
}
/deep/ .ant-table-thead > tr > th {
  background: #fafafa !important;
}
.tips{
  color: red;
}
</style>
